<template>
  <Layout>
    <PageHeader :title="title"></PageHeader>
    <div class="row">
      <div class="col-md-12">
        <div class="card">
          <div class="card-body">
            <div>
              <div class="mt-3 mb-3 row" style="align-items:center;">
                <div class="col-md-6">
                  <input type="text" class="form-control rounded" placeholder="输入你要检索的数据ID编号代码" />
                </div>
                <div class="col-md-3">
                  <b-button variant="primary">
                    <i class="ri-search-line align-middle mr-1"></i>查询
                  </b-button>
                </div>
                <div class="col-md-3" style="text-align:right;">查看历史查询记录</div>
              </div>
            </div>
            <div>
              <div id="gen-question-accordion" class="custom-accordion-arrow">
                <div class="card">
                  <a
                    v-b-toggle.gen-question-accordion-1
                    class="text-dark"
                    data-toggle="collapse"
                    aria-expanded="true"
                    aria-controls="gen-question-collapseOne"
                  >
                    <div class="card-header" id="gen-question-headingOne">
                      <h5 class="font-size-14 m-0">
                        <i class="mdi mdi-chevron-up accor-arrow-icon"></i>
                        数据采集
                      </h5>
                    </div>
                  </a>
                  <b-collapse
                    id="gen-question-accordion-1"
                    visible
                    accordion="my-accordion"
                    aria-labelledby="gen-question-headingOne"
                    data-parent="#gen-question-accordion"
                  >
                    <div class="card-body">
                      这里是一段概述
                    </div>
                  </b-collapse>
                </div>
                <div class="card">
                  <a
                    v-b-toggle.gen-question-accordion-2
                    data-toggle="collapse"
                    aria-expanded="false"
                    aria-controls="gen-question-collapseTwo"
                  >
                    <div class="card-header" id="gen-question-headingTwo">
                      <h5 class="font-size-14 m-0">
                        <i class="mdi mdi-chevron-up accor-arrow-icon"></i>
                        数据去重
                      </h5>
                    </div>
                  </a>
                  <b-collapse
                    id="gen-question-accordion-2"
                    accordion="my-accordion"
                    aria-labelledby="gen-question-headingTwo"
                    data-parent="#gen-question-accordion"
                  >
                    <div class="card-body">
                      数据去重
                    </div>
                  </b-collapse>
                </div>
                <div class="card">
                  <a
                    v-b-toggle.gen-question-accordion-3
                    data-toggle="collapse"
                    aria-expanded="false"
                    aria-controls="gen-question-collapseThree"
                  >
                    <div class="card-header" id="gen-question-headingThree">
                      <h5 class="font-size-14 m-0">
                        <i class="mdi mdi-chevron-up accor-arrow-icon"></i>
                        数据解析
                      </h5>
                    </div>
                  </a>
                  <b-collapse
                    id="gen-question-accordion-3"
                    accordion="my-accordion"
                    aria-labelledby="gen-question-headingThree"
                    data-parent="#gen-question-accordion"
                  >
                    <div class="card-body">
                      数据解析
                    </div>
                  </b-collapse>
                </div>
                <div class="card">
                  <a
                    v-b-toggle.gen-question-accordion-4
                    data-toggle="collapse"
                    aria-expanded="false"
                    aria-controls="gen-question-collapseFour"
                  >
                    <div class="card-header" id="gen-question-headingFour">
                      <h5 class="font-size-14 m-0">
                        <i class="mdi mdi-chevron-up accor-arrow-icon"></i>
                        数据传输（MQ）
                      </h5>
                    </div>
                  </a>
                  <b-collapse
                    id="gen-question-accordion-4"
                    accordion="my-accordion"
                    aria-labelledby="gen-question-headingFour"
                    data-parent="#gen-question-accordion"
                  >
                    <div class="card-body">
                      数据传输（MQ）
                    </div>
                  </b-collapse>
                </div>
                <div class="card">
                  <a
                    v-b-toggle.gen-question-accordion-5
                    class="collapsed"
                    data-toggle="collapse"
                    aria-expanded="false"
                    aria-controls="gen-question-collapseFive"
                  >
                    <div class="card-header" id="gen-question-headingFive">
                      <h5 class="font-size-14 m-0">
                        <i class="mdi mdi-chevron-up accor-arrow-icon"></i>
                        数据暂存
                      </h5>
                    </div>
                  </a>
                  <b-collapse
                    id="gen-question-accordion-5"
                    accordion="my-accordion"
                    aria-labelledby="gen-question-headingFive"
                    data-parent="#gen-question-accordion"
                  >
                    <div class="card-body">
                      数据暂存
                    </div>
                  </b-collapse>
                </div>
                <div class="card">
                  <a
                    v-b-toggle.gen-question-accordion-5
                    class="collapsed"
                    data-toggle="collapse"
                    aria-expanded="false"
                    aria-controls="gen-question-collapseFive"
                  >
                    <div class="card-header" id="gen-question-headingFive">
                      <h5 class="font-size-14 m-0">
                        <i class="mdi mdi-chevron-up accor-arrow-icon"></i>
                        数据处理  （nlp、去重）
                      </h5>
                    </div>
                  </a>
                  <b-collapse
                    id="gen-question-accordion-5"
                    accordion="my-accordion"
                    aria-labelledby="gen-question-headingFive"
                    data-parent="#gen-question-accordion"
                  >
                    <div class="card-body">
                      数据处理  （nlp、去重）
                    </div>
                  </b-collapse>
                </div>
                <div class="card">
                  <a
                    v-b-toggle.gen-question-accordion-5
                    class="collapsed"
                    data-toggle="collapse"
                    aria-expanded="false"
                    aria-controls="gen-question-collapseFive"
                  >
                    <div class="card-header" id="gen-question-headingFive">
                      <h5 class="font-size-14 m-0">
                        <i class="mdi mdi-chevron-up accor-arrow-icon"></i>
                        数据标记
                      </h5>
                    </div>
                  </a>
                  <b-collapse
                    id="gen-question-accordion-5"
                    accordion="my-accordion"
                    aria-labelledby="gen-question-headingFive"
                    data-parent="#gen-question-accordion"
                  >
                    <div class="card-body">
                      数据标记
                    </div>
                  </b-collapse>
                </div>
                <div class="card">
                  <a
                    v-b-toggle.gen-question-accordion-5
                    class="collapsed"
                    data-toggle="collapse"
                    aria-expanded="false"
                    aria-controls="gen-question-collapseFive"
                  >
                    <div class="card-header" id="gen-question-headingFive">
                      <h5 class="font-size-14 m-0">
                        <i class="mdi mdi-chevron-up accor-arrow-icon"></i>
                        数据存储
                      </h5>
                    </div>
                  </a>
                  <b-collapse
                    id="gen-question-accordion-5"
                    accordion="my-accordion"
                    aria-labelledby="gen-question-headingFive"
                    data-parent="#gen-question-accordion"
                  >
                    <div class="card-body">
                      数据存储
                    </div>
                  </b-collapse>
                </div>
                <div class="card">
                  <a
                    v-b-toggle.gen-question-accordion-5
                    class="collapsed"
                    data-toggle="collapse"
                    aria-expanded="false"
                    aria-controls="gen-question-collapseFive"
                  >
                    <div class="card-header" id="gen-question-headingFive">
                      <h5 class="font-size-14 m-0">
                        <i class="mdi mdi-chevron-up accor-arrow-icon"></i>
                        数据编辑
                      </h5>
                    </div>
                  </a>
                  <b-collapse
                    id="gen-question-accordion-5"
                    accordion="my-accordion"
                    aria-labelledby="gen-question-headingFive"
                    data-parent="#gen-question-accordion"
                  >
                    <div class="card-body">
                      数据编辑
                    </div>
                  </b-collapse>
                </div>
                <div class="card">
                  <a
                    v-b-toggle.gen-question-accordion-5
                    class="collapsed"
                    data-toggle="collapse"
                    aria-expanded="false"
                    aria-controls="gen-question-collapseFive"
                  >
                    <div class="card-header" id="gen-question-headingFive">
                      <h5 class="font-size-14 m-0">
                        <i class="mdi mdi-chevron-up accor-arrow-icon"></i>
                        数据调用
                      </h5>
                    </div>
                  </a>
                  <b-collapse
                    id="gen-question-accordion-5"
                    accordion="my-accordion"
                    aria-labelledby="gen-question-headingFive"
                    data-parent="#gen-question-accordion"
                  >
                    <div class="card-body">
                      数据调用
                    </div>
                  </b-collapse>
                </div>
                <div class="card">
                  <a
                    v-b-toggle.gen-question-accordion-5
                    class="collapsed"
                    data-toggle="collapse"
                    aria-expanded="false"
                    aria-controls="gen-question-collapseFive"
                  >
                    <div class="card-header" id="gen-question-headingFive">
                      <h5 class="font-size-14 m-0">
                        <i class="mdi mdi-chevron-up accor-arrow-icon"></i>
                        数据展示
                      </h5>
                    </div>
                  </a>
                  <b-collapse
                    id="gen-question-accordion-5"
                    accordion="my-accordion"
                    aria-labelledby="gen-question-headingFive"
                    data-parent="#gen-question-accordion"
                  >
                    <div class="card-body">
                      数据展示
                    </div>
                  </b-collapse>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Layout>
</template>
<script>
import Layout from "../../layouts/main";
import PageHeader from "@/components/page-header";
export default {
  components: {
    Layout,
    PageHeader,
  },
  data () {
    return {
      title: "数据生命周期",
    }
  },
  methods: {
    
  }
}
</script>
<style lang="scss" scoped>
.card-body ::v-deep .newul{
  display: block;
  li{
    display: inline-block;
    margin: 0 1rem;
    a{
      padding: 0.5rem 0rem;
    }
  }
}
.isActive {
  color: #fff;
  background-color: #5664d2;
}
.sel {
  margin-top: 20px;
  .sel-title {
    display: inline-block;
    color: #74788d;
    padding-right: 10px;
  }
  .sel-item {
    font-size: 12px;
    margin-left: 10px;
    padding-left: 8px;
    padding-right: 8px;
    min-width: 70px;
    &:hover {
      cursor: pointer;
    }
  }
}
::v-deep .el-radio__input.is-checked .el-radio__inner {
    border-color: #5664d2;
    background: #5664d2;
}
::v-deep .el-radio__input.is-checked+.el-radio__label {
    color: #5664d2;
}
</style>
